<!--问答区-->
<div id="ask-list">
  <div class="topic-list text-center" v-if="show_ask.length==0">
    <div class="empty">暂时没有问题</div>
  </div>
  <div class="topic-list" v-if="show_ask.length>0">
    <ask-list v-for="(ask, index) in show_ask"
              :index="index" :ask="ask" :key="ask.id"></ask-list>
  </div>

  <nav class="text-center" v-if="page.totalPages>1">
    <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
  </nav>
</div>

<template id="ask-li">
  <div class="media topic-item">
    <div class="media-left media-middle">
      <a class="pull-left js-user-card" :href="'/user/' + ask.user.id + '/home'">
        <img class="avatar-sm" src="/static/img/pk.jpg">
      </a>
    </div>
    <div class="media-body">
      <div class="title">
        <i class="es-icon es-icon-help color-danger"></i>
        <a @click="showAskInfo(ask.id)" href="javascript:">{{ask.title}}</a>
      </div>
      <div class="metas text-sm">
        <a :href="'/user/' + ask.user.id + '/home'" class="color-gray">{{ask.user.username}}</a>
        <span>发起了问答</span>
        <span class="bullet">•</span>
        <span>{{ask.time}}</span>
      </div>
    </div>

    <div class="media-data hidden-xs">
      <span>{{ask.results}}<br>回复</span>
      <span>{{ask.looks}}<br>浏览</span>
    </div>
  </div>
</template>

<script>
  var askVm = new Vue({
    el: '#ask-list',
    data: {
      course: {
        id: ${kid}
      },
      //要展示的问题
      show_ask: [],
      //分页
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 5
      }
    },
    components: {
      'ask-list': {
        props: ['show_ask', 'ask', 'index'],
        template: '#ask-li',
        methods: {
          showAskInfo: function (wid) {
            window.open('info?wid=' + wid, '_blank');
          }
        }
      }
    },
    created: function () {
      this.getPage();
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getPage();
      }
    },
    methods: {
      getPage: function () {
        var vm = this;
        $.post('/course/ask/api/' + this.course.id + '/join/info/get', {page: this.page.pageNum}, function (data) {
          if(data.success) {
            vm.show_ask = [];
            vm.show_ask = data.payload.rows;
            vm.page.pageNum = data.payload.pageNum;
            vm.page.totalPages = data.payload.totalPages;
          }
        });
      },
      gotoPage: function (page) {
        this.page.pageNum = page;
      }
    }
  });
</script>